<template>
  <div class="ivz-options-form">
    <div style="position: relative">
      <a-radio-group v-model="value" button-style="solid" size="small">
          <a-radio-button value="dict">数据字典</a-radio-button>
          <a-radio-button value="url">url地址</a-radio-button>
      </a-radio-group>
    </div>
    <div v-if="value == 'dict'">
      <a-input-group compact>
        <a-select v-model="model['dictValue']" placeholder="请选择字典类型"
              @change="dictChange" :options="treeData" style="width: 66%"/>
        <a-button type="primary" @click="()=>{this.visible=true;}">新增</a-button>
      </a-input-group>
    </div>
    <div v-else>
        <a-input v-model="model['urlValue']" placeholder="请输入地址, 以http(s)开头" />
    </div>
    <a-modal v-model="visible" title="新增字典" @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>

<script>
    export default {
        name: "IvzOptionsForm",
        props: ["meta", "model"],
        watch: {
            value(nv, ov){
                let field = this.meta.field;
                this.model[field] = nv;
                if(nv == 'cus') {
                    this.model['options'] = this.cusOptions;
                } else if(nv == 'dict') {
                    this.model['options'] = this.dictOptions
                } else {
                    this.model['options'] = [];
                }
            }
        },
        data() {
            return {
              visible: false,
              value: 'dict',
              treeData: [],
              cusOptions: [],
              dictOptions: []
            }
        },
        created() {
            this.init();
        },
        updated() {
            this.init();
        },
        methods: {
          init() {
              if(this.model[this.meta.field]) {
                  this.value = this.model[this.meta.field];
              }
              if(this.model['options'] && this.model['options'].length > 0) {
                  if(this.model['dataType'] == 'cus') {
                      this.cusOptions = this.model['options'];
                  } else if(this.model['dataType'] == 'dict') {
                      this.dictOptions = this.model['options'];
                  } else {

                  }
              } else {
                  this.cusOptions = this.getCusOptions();
                  this.model['options'] = this.cusOptions;
              }
          },
          getCusOptions() {
              return [{label: 'demo', value: 'demo'}]
          },
          addHandle() {
              this.cusOptions.push({label: '', value: ''});
          },
          dictChange(val) {
              this.dictOptions = PreviewData.getDictData(val);
              this.model['options'] = this.dictOptions;
          },
          jianHandle(option) {
              this.cusOptions.forEach((item, index) => {
                  if(item == option)
                      this.cusOptions.splice(index, 1);
              })
          },
          handleOk() {

          }
        }
    }
</script>

<style scoped>
    .ivz-options-form {
        /*border-bottom: 1px dashed #afafaf;*/
    }
    .ivz-options-form .ant-input {
        padding: 4px 4px;
    }
    .ivz-options-form .ivz-of-item {
        position: relative;
    }
</style>
